<template>
	<view class="body">
		<!-- 头部 -->
		<view class="topbar">
			<image src="/static/aidex/login/login-bg2.png"></image>
		</view>
		<!-- 登录表单 -->
		<view class="loginCard">
			<view class="form">
				<view class="login_name">欢迎登录顺带系统！</view>
				<view class="ul">
					<view class="li">
						<view class="text">+86</view>
						<input type="number" maxlength="11" v-model="submitForm.phone" placeholder="请输入手机号码" />
					</view>
					<view class="li">
						<input type="number" v-model="submitForm.sms_code" placeholder="输入验证码" />
						<view class="text" v-if="count == 30 && showSend" @click="handleSend">发送验证码</view>
						<view class="text" v-if="!showSend">{{count}}s</view>
						<view class="text" v-if="count == 0 && showSend" @click="handleSend">重新发送</view>
					</view>
					<view class="remember">
						<u-checkbox-group placement="column">
							<u-checkbox v-model="read" :checked='read' @change="handleRemember" color="#5476de" />
							我已阅读并同意
						</u-checkbox-group>
						<view class="text" @click="handleAgree">《顺带系统用户服务协议》</view>
					</view>
					<view class="remember noRe">未注册的手机号登录成功后将自动注册</view>
					<view :class="submitForm.phone ? 'login_btn active' : 'login_btn'" @click="handleLogin">登&nbsp;录
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="circle">
				<view class="small-circle"></view>
			</view>
			<tf-verify-img @succeed="chenggong" @close="showVerify = false" v-if="showVerify"
				:verifyImgs="imgs"></tf-verify-img>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import tfVerifyImg from '@/components/tf-verify-img/tf-verify-img.vue';
	export default {
		components: {
			tfVerifyImg
		},
		data() {
			return {
				count: 30,
				showSend: true,
				read: false,
				submitForm: {
					phone: '',
					sms_code: '',
				},
				showVerify: false,
				imgs: [{
					src: '/static/verify/0.jpeg',
					color: '#38a7b7'
				}, {
					src: '/static/verify/1.jpeg',
					color: '#485967'
				}]
			}
		},
		created() {

		},
		methods: {
			//已阅读
			handleRemember(value) {
				this.read = value
			},
			handleAgree() {
				uni.navigateTo({
					url: "/pages/sys/login/agreement"
				})
			},
			//点击发送验证码--校验必填后打开拼图
			handleSend() {
				let msg = ''
				if (this.read == false) {
					msg = '请阅读并同意用户服务协议！'
				}
				let phonetel =
					/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/
				if (this.submitForm.phone == "") {
					msg = '请输入手机号！'
				} else if (!phonetel.test(this.submitForm.phone)) {
					msg = '电话号格式不正确！'
				}
				if (msg) {
					this.$refs.uToast.show({
						title: msg,
						type: 'error',
					})
					return false
				}
				//打开拼图
				this.showVerify = true
			},
			//拼图验证成功后发验证码
			chenggong() {
				this.$refs.uToast.show({
					title: '验证成功',
					type: 'success'
				})
				this.showVerify = false
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					uni.hideLoading()
					this.sendSms()
				}, 2000)
			},
			// 验证码倒计时
			sendSms() {
				this.showSend = false
				let timer = setInterval(() => {
					if (this.count > 0 && this.count <= 30) {
						this.count--
					} else {
						this.showSend = true
						clearInterval(timer)
						timer = null
					}
				}, 1000)
				//1秒后开始请求短信接口
				setTimeout(() => {
					this.sendCode()
				}, 1000)
			},
			//发送验证码
			sendCode() {
				this.$Api.sendCode({
					phone: this.submitForm.phone,
				}).then(res => {
					// console.log('获取短信验证码', res)
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
					})
				}, err => {
					console.log(err)
				})
			},
			//获取token
			getToken() {
				this.$Api.getToken().then(res => {
					// console.log('获取token', res)
					uni.setStorageSync('token', res.result.token)
				}, err => {
					console.log(err)
				})
			},
			// 登录
			handleLogin() {
				let msg = ''
				if (this.read == false) {
					msg = '请阅读并同意用户服务协议！'
				}
				if (this.submitForm.sms_code == "") {
					msg = '请输入验证码！'
				}
				if (this.submitForm.phone == "") {
					msg = '请输入手机号！'
				}
				if (msg) {
					this.$refs.uToast.show({
						title: msg,
						type: 'error',
					})
					return false
				}
				this.$Api.login(this.submitForm).then(res => {
					console.log('登录成功', res)
					// 获取 Set-cookie 头
					// const headers = res.header;
					// const setCookie = headers['Set-Cookie'] || headers['set-cookie'];
					// console.log("setCookie", setCookie);
					// this.getToken()
					uni.setStorageSync('userInfo', res.result)
					uni.setStorageSync('userInfoIs_auth', res.result.is_auth)
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.body {
		width: 100%;
		height: 100vh;
		background-color: aquamarine;
		overflow: hidden;

		.topbar {
			width: 100%;
			height: 35%;
			display: flex;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
			}

			.title {
				width: 100%;
				font-size: 80upx;
				color: #fff;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				text-shadow: 4px 2px rgba(255, 255, 255, 0.15);

				&:last-child {
					margin-top: 20upx;
				}
			}
		}

		.loginCard {
			width: 100%;
			height: 70%;
			background: #fff;
			border-radius: 40upx 40upx 0 0;
			padding: 80upx 60upx;
			position: relative;
			bottom: 0;
			top: -50upx;

			.form {
				position: relative;
				z-index: 10;

				.login_name {
					color: #5476de;
					font-size: 60upx;
					font-weight: bold;
					text-align: left;
					text-shadow: 4px 2px rgba(59, 90, 181, 0.25);
				}

				.ul {
					width: 100%;
					margin-top: 60upx;

					.li {
						width: 100%;
						height: 100upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 60upx;
						border-radius: 60upx;
						padding: 0 40upx;
						background: #fff;
						box-shadow: 0 0 24upx -12upx rgba(0, 0, 0, .4);

						&:first-child {
							justify-content: flex-start;

							input {
								margin-left: 20upx;
							}
						}

						input {
							font-size: 30upx;
						}

						.text {
							color: #414141;
						}
					}

					.remember {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 60upx;

						&.noRe {
							color: #999;
						}

						/deep/ .u-checkbox-group {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							&.u-checkbox-group--column {
								flex-direction: row;
							}
						}

						.text {
							color: #5476de;
						}
					}

					.login_btn {
						width: 100%;
						height: 100upx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 60upx;
						font-size: 32upx;
						color: #999;
						background: #fbfbfb;
						box-shadow: 0 0 24upx -12upx rgba(0, 0, 0, .4);
						transition: .3s;

						&.active {
							color: #fff;
							background: linear-gradient(to right, #829ef9, #665dd0);
							box-shadow: 4upx 4upx 15upx #999;
						}
					}
				}
			}

			.circle {
				width: 1000upx;
				height: 1000upx;
				border-radius: 50%;
				background: rgba(130, 158, 249, 0.1);
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: -260upx;
				right: -380upx;
				z-index: 9;

				.small-circle {
					width: 600upx;
					height: 600upx;
					border-radius: 50%;
					background: #fff;
				}
			}
		}
	}
</style>